<template>
  <view class="container">
    <!-- 搜索框 -->
    <view class="search-box">
      <uni-search-bar placeholder="搜索商品" @confirm="search"></uni-search-bar>
    </view>
    
    <!-- 轮播图 -->
    <swiper class="swiper" indicator-dots autoplay circular>
      <swiper-item v-for="(item, index) in banners" :key="index">
        <image :src="item.image" mode="aspectFill"></image>
      </swiper-item>
    </swiper>
    
    <!-- 分类导航 -->
    <view class="nav-grid">
      <view class="nav-item" v-for="(item, index) in navList" :key="index">
        <image :src="item.icon" mode="aspectFit"></image>
        <text>{{item.name}}</text>
      </view>
    </view>
    
    <!-- 商品列表 -->
    <view class="goods-list">
      <view class="goods-item" v-for="(item, index) in goodsList" :key="index">
        <image :src="item.image" mode="aspectFit"></image>
        <view class="goods-info">
          <text class="goods-title">{{item.name}}</text>
          <text class="goods-price">¥{{item.price}}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      banners: [
        {image: '/static/banner1.jpg'},
        {image: '/static/banner2.jpg'},
        {image: '/static/banner3.jpg'}
      ],
      navList: [
        {name: '新品', icon: '/static/nav1.png'},
        {name: '促销', icon: '/static/nav2.png'},
        {name: '热销', icon: '/static/nav3.png'},
        {name: '分类', icon: '/static/nav4.png'}
      ],
      goodsList: [
        {name: '商品1', price: '99.00', image: '/static/goods1.jpg'},
        {name: '商品2', price: '129.00', image: '/static/goods2.jpg'},
        {name: '商品3', price: '59.00', image: '/static/goods3.jpg'},
        {name: '商品4', price: '199.00', image: '/static/goods4.jpg'}
      ]
    }
  },
  methods: {
    search(value) {
      uni.showToast({
        title: '搜索: ' + value,
        icon: 'none'
      })
    }
  }
}
</script>

<style>
.container {
  padding: 20rpx;
}
.search-box {
  margin-bottom: 20rpx;
}
.swiper {
  height: 350rpx;
  margin-bottom: 20rpx;
}
.swiper image {
  width: 100%;
  height: 100%;
}
.nav-grid {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 20rpx;
}
.nav-item {
  width: 25%;
  text-align: center;
  padding: 10rpx 0;
}
.nav-item image {
  width: 80rpx;
  height: 80rpx;
}
.goods-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.goods-item {
  width: 48%;
  margin-bottom: 20rpx;
  background: #fff;
  border-radius: 10rpx;
  overflow: hidden;
}
.goods-item image {
  width: 100%;
  height: 300rpx;
}
.goods-info {
  padding: 10rpx;
}
.goods-title {
  font-size: 28rpx;
  color: #333;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.goods-price {
  font-size: 32rpx;
  color: #ff2d4a;
  font-weight: bold;
}
</style>